<template>
    <div>
        <div class="contain1">
            <div class="table">
                <el-table
                        :data="newSong.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        style="width: 100%"
                >
                    <el-table-column
                            prop="name"
                            width="200" label="音乐标题">
                    </el-table-column>
                    <el-table-column
                            prop="song.artists[0].name"
                            width="290" label="歌手">
                    </el-table-column>
                    <el-table-column
                            prop="song.album.name"
                            width="290" label="专辑">
                    </el-table-column>
                    <el-table-column>
                        <template  slot-scope="scope">
                            <el-button
                                    size="mini" @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-service toPlay"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        layout="prev, pager, next"
                        @current-change="current_change"
                        :total="30">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            newSong: {
                type: Array,
            }
        },
        name: "Box2",
        data() {
            return {
                currentPage: 1,
                pageSize: 6

            }
        },
        methods: {
            current_change(val) {
                this.currentPage = val;
            },
            handleEdit(index, row) {
                console.log(index, row);

            },
            // clickCell(id, index, cell) {
            //     if (cell.querySelector(".toPlay")){
            //         this.$emit("clickPlay", {id, index});
            //     }
            //
            // }

        }
    }
</script>

<style scoped>
    .contain1 {

    }

    .table {
        margin-top: 10px;
    }

    .block {
        margin: 10px 0;
    }

    /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
        border-bottom: none;
    }

    .el-table::before {
        height: 0px;
    }

    .el-pagination {
        margin: auto;
        width: 30%;
        color: #9d9d9d;
    }

    /deep/ .el-pager {
        display: inline;
        margin: auto;
        width: 80%;
    }

    /deep/ .el-pager li.active {
        color: #40E0D0;
    }
</style>